

@mixin browseItems() {
.esri-browseitems {
	margin: 0 auto;
	width: 100%;
	font-family: "Avenir LT W01 35 Light",Arial,Helvetica,sans-serif;
	height: 100%;
	.gallery {
		min-height: 450px;
		margin: 0 auto;
		height: 100%;
		clear: both;
		.gallery-left {
			float: left;
			width: 25%;
			overflow-y: auto;
			overflow-x: hidden;
			height: 90%;
			a {
				text-decoration: none;
				color: #6e6e6e;
				font-size: 15px;
			}
		}
		.gallery-right {
			float: right;
			width: 74%;
			height: 100%;
			margin-top: 8px;
			p.filter-title {
				margin-bottom: 0.3em;
				padding: 0 1.5% 0 1.5%;
				font-size: 17px;
			}
		}
		.template-info-panel {
			width: 279px;
			padding: 15px;
			background: rgba(255,255,255, 1);
			border: solid 1px #e0e0e0;
			border-right: none;
			right: -680px;
			top: 0px;
			overflow-x: hidden;
			position: absolute;
			z-index: 800;
			box-shadow: -2px 1px 2px rgba(0,0,0, 0.25);
			transition: all 500ms ease-in-out;
			height: 94.5%;
		}
	}
	.esri-loaderthrob {
		position: absolute;
		background: #fff url("../base/images/loading-throb.gif") 100% center no-repeat !important;
		top: 45%;
		width: 33px;
		text-align: center;
		z-index: 100;
		color: #ccc;
		height: 39px;
		left: 58%;
	}
	.dgrid {
		.dgrid-loading {
			position: absolute;
			background: #fff url("../base/images/loading-throb.gif") 100% center no-repeat !important;
			top: 45%;
			width: 33px;
			text-align: center;
			z-index: 100;
			color: #ccc;
			height: 39px;
			left: 58%;
		}
		.gallery-view {
			h5 {
				width: 100%;
				height: 2.125em;
				line-height: 1.0em;
				font-size: 16px;
				word-wrap: break-word;
				font-family: "Avenir LT W01 35 Light",Arial,Helvetica,sans-serif;
				overflow: hidden;
			}
		}
		border: none !important;
		height: auto;
		min-height: 180px !important;
		.dgrid-footer {
			background: none repeat scroll 0 0 #FFF !important;
			position: relative;
		}
		.dgrid-status {
			display: none !important;
			visibility: hidden;
		}
		.dgrid-pagination {
			.dgrid-page-link {
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
				&:hover {
					background-color: #007AC2;
					color: #FFF;
				}
			}
			.dgrid-page-skip {
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
			}
			.dgrid-page-disabled {
				background-color: #007AC2;
				color: #FFF;
			}
			.dgrid-first {
				&:hover {
					background-color: #007AC2;
					color: #FFF;
				}
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
			}
			.dgrid-previous {
				&:hover {
					background-color: #007AC2;
					color: #FFF;
				}
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
			}
			.dgrid-next {
				&:hover {
					background-color: #007AC2;
					color: #FFF;
				}
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
			}
			.dgrid-last {
				&:hover {
					background-color: #007AC2;
					color: #FFF;
				}
				background: none repeat scroll 0 0 #F2F2F2;
				border: 1px solid #EDEDED;
				border-radius: 4px 4px 4px 4px;
				color: #999999;
				font-size: 1em;
				line-height: 1.5em;
				margin: 5px;
				padding: 5px 10px;
				float: left;
			}
		}
	}
	.hide {
		display: none;
	}
	.top-bar {
		clear: both;
		width: 100%;
		padding: 0 10px;
		margin: auto;
	}
	#gallery-grid_search {
		width: 31%;
		margin-bottom: 10px;
	}
	.gallery-left {
		ul {
			list-style: none;
			padding: 0 0;
			margin: 15px 0;
			width: 100%;
			border-right: 1px solid #efefef;
			border-bottom: 1px solid #efefef;
			border-left: 1px solid #efefef;
		}
		li {
			a {
				padding: .5rem .2rem .5rem .7rem;
				font-size: 15px;
				margin-right: 0;
				display: block;
				line-height: 1.42857143;
				border-top: 1px solid #efefef;
				width: 90%;
				color: #6e6e6e;
				position: relative;
				&:hover {
					&:after {
						content: "»";
						opacity: 1;
						position: absolute;
						right: 0;
						top: .5rem;
						padding: 0 0.3875rem;
						transition: all 150ms linear;
					}
				}
			}
		}
		li.active {
			>a {
				color: #6e6e6e;
				cursor: default;
				background-color: #d2e9f9;
				&:focus {
					color: #6e6e6e;
					cursor: default;
					background-color: #d2e9f9;
				}
			}
		}
	}
	.dgrid-grid.dgrid {
		.gallery-view {
			img {
				border: 1px solid #e0e0e0;
				padding: 4px;
				transition: all .2s ease-in-out;
				&:hover {
					border-color: #333;
				}
			}
		}
		.dgrid-row {
			.gallery-view {
				float: left;
				width: 29.9%;
				padding: 1% 1.6%;
				margin: auto;
				position: relative;
				&:hover {
					cursor: pointer;
					background: #fff;
					background-color: #fff;
				}
			}
		}
		.dgrid-scroller {
			position: relative;
			min-height: 380px;
		}
		background: none repeat scroll 0 0 #FFF;
		border: none;
		width: auto !important;
		height: auto;
		max-height: 75%;
		overflow-y: auto;
		.dgrid-content {
			background: none repeat scroll 0 0 #FFF;
			border: none;
			width: auto !important;
			height: auto;
			overflow-y: hidden;
		}
		.dgrid-row.dgrid-selected {
			.gallery-view {
				background: #fff;
				background-color: #fff;
				&:hover {
					background: #fff;
					background-color: #fff;
				}
			}
		}
		.dgrid-navigation {
			float: inherit !important;
			margin: 0 auto;
			height: 40px;
			text-align: center;
			display: table;
			width: auto !important;
		}
	}
	.template-overlay {
		position: absolute;
		z-index: 100;
		top: 12px;
		left: 15px;
		background: rgba(0, 0, 0, 0.7);
		text-align: center;
		color: #fff;
		width: 187px;
		height: 124px;
		line-height: 124px;
		pointer-events: none;
		font-size: 15px !important;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		p {
			font-size: 15px;
		}
	}
	.instructions {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 50%;
		float: left;
		span {
			font-size: 17px;
			display: inline-block;
		}
		span.hide.messageLeft {
			width: 0;
			padding: 0;
			display: none;
		}
		span.messageLeft {
			width: 37%;
			padding-right: 6.25%;
			vertical-align: top;
		}
		span.messageRight {
			width: 100%;
			vertical-align: top;
		}
		.messageRight {
			opacity: 1;
			transition: opacity 250ms ease-in-out, left 0ms linear;
		}
	}
	.input-group-btn {
		.btn {
			margin-top: 0.6em;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			height: 2.25rem;
		}
	}
	.dgrid-no-data {
		position: relative;
		font-size: 17px;
		margin: 20px;
	}
	.templates.fade {
		.dgrid {
			opacity: 0.3;
			transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
			pointer-events: none;
		}
		.filter-title {
			opacity: 0.3;
			transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
			pointer-events: none;
		}
	}
	.templates {
		opacity: 1;
		transition: opacity 250ms ease-in-out, left 0ms linear;
	}
	.soria {
		.dgrid-selected {
			background: #fff;
			background-color: #fff;
		}
	}
	.template-info-showing {
		min-height: 150px;
		.template-info {
			display: block;
		}
		.thumbnail {
			border: 1px solid #e0e0e0;
			width: auto;
			margin: 0 0 10px 0;
			float: left;
			padding: 0;
			&:hover {
				border-color: #e0e0e0;
				cursor: auto;
			}
			>img {
				margin: 0;
				width: 277px;
			}
		}
		h4 {
			margin-bottom: 0.5rem;
			font-size: 1.25rem;
			clear: left;
			color: #616161;
			font-weight: normal;
			max-height: 3.0em;
			overflow: hidden;
			height: auto;
		}
		p {
			font-size: 1rem !important;
			width: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			height: 7.5em;
			line-height: 1.25em;
		}
	}
	.panel-actions {
		width: 100%;
		position: absolute;
		bottom: 15px;
		left: 0;
		opacity: 0;
		transition: opacity 250ms ease 500ms;
		text-align: center;
	}
	.quiet-scroll {
		pre {
			&::-webkit-scrollbar {
				width: 4px !important;
				height: 4px !important;
				border-left: 0;
				background: rgba(0, 0, 0, 0.1);
			}
			&::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0.4);
				border-radius: 0;
			}
			&::-webkit-scrollbar-track {
				background: none;
			}
		}
		&::-webkit-scrollbar {
			width: 4px !important;
			height: 4px !important;
			border-left: 0;
			background: rgba(0, 0, 0, 0.1);
		}
		&::-webkit-scrollbar-thumb {
			background: rgba(0, 0, 0, 0.4);
			border-radius: 0;
		}
		&::-webkit-scrollbar-track {
			background: none;
		}
	}
	.btn-main {
		width: 90%;
		margin-bottom: 10px;
	}
	.btn-secondary {
		background-color: transparent;
		color: #5daddd;
		width: 44%;
		border: 1px solid #5daddd;
		margin: 4px 4px 10px 4px;
		&:hover {
			text-decoration: none;
			background-color: #5daddd;
			color: white;
		}
	}
	.btn-wide {
		width: 90%;
	}
	.btn-cancel {
		background: none;
		border-color: #fff;
		color: #828282;
		&:hover {
			background: none;
			border-color: #fff;
			color: #005e95;
		}
	}
	p {
		margin: 0;
	}
	.btn {
		text-transform: uppercase;
		font-size: 14px;
		padding: 0.37rem 0.9rem;
		box-shadow: none;
		white-space: normal;
		word-wrap: break-word;
	}
	.searchBar {
		margin-right: 15px;
		margin-top: 3px;
		max-width: 37%;
		width: auto;
		float: right;
		.esriSearchBox {
			padding-left: 1.50em !important;
			background: url("../base/images/search.svg") no-repeat .25em center white !important;
			display: inline-block;
			padding: 0 0.31rem;
			font-size: 0.9375rem;
			line-height: 1.55rem;
			color: #595959;
			border: 1px solid #a9a9a9;
			transition: border-color 150ms linear;
			-webkit-appearance: textfield;
			height: 2.25rem;
			border-radius: 4px;
			width: auto;
			margin: 0 0 0 0 0;
			float: left;
			width: auto;
		}
		.btn {
			margin-top: 0.6em;
			height: 38px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
	.esriSearchBox {
		&:focus {
			border: 1px solid #0079C1;
		}
	}
}
/*-------- Filters  -------------------------*/
.esri-browseitems.filters {
	.esriHelpIcon {
		background: url("../base/images/helpIcon.png") no-repeat center;
		width: 20px;
		height: 20px;
		margin: 1px 0 0 10px;
		cursor: pointer;
		display: inline-block;
	}
	.esriHelpIcon.hide {
		display: none;
	}
	.instructions {
		width: 60%;
		span.messageRight {
			max-width: 40%;
			width: auto;
			vertical-align: top;
		}
	}
}
.esri-browseitems.nofilters {
	.esri-loaderthrob {
		left: 48%;
	}
	.gallery {
		.gallery-left {
			width: 0;
			display: none;
		}
		.gallery-right {
			width: 100%;
			float: left;
			overflow: hidden;
		}
		span.messageRight {
			width: 100%;
			vertical-align: top;
		}
	}
	span.messageLeft {
		width: 0;
		padding: 0;
		display: none;
	}
	.dgrid-grid.dgrid {
		.dgrid-scroller {
			margin-bottom: 0px !important;
		}
	}
}
.esri-browseitems.nofilters.wide {
	.dgrid-grid.dgrid {
		.dgrid-row {
			.gallery-view {
				width: 21%;
			}
		}
	}
	.template-overlay {
		top: 14px;
		left: 18px;
	}
}
/*-------- RTL Styles  -------------------------*/
.html[dir="rtl"] {
	.esri-browseitems.filters {
		.esriHelpIcon {
			margin: 0 10px 0 0;
		}
	}
	.esri-browseitems {
		.searchBar {
			.esriSearchBox {
				padding-left: inherit;
				padding-right: 1.50em;
				float: right;
				border-radius: 0 4px 4px 0;
				background: #fff url("../base/images/search32.png") 98% center no-repeat !important;
			}
			margin: 0 0 0 10px;
			margin-right: inherit;
			margin-left: 15px;
			.btn {
				border-radius: 4px 0 0 4px;
			}
		}
		.dgrid {
			.dgrid-pagination {
				.dgrid-page-link {
					float: right;
				}
				.dgrid-page-skip {
					float: right;
				}
			}
			.dgrid-row {
				.gallery-view {
					float: right;
				}
			}
		}
		.gallery {
			.gallery-left {
				float: right;
			}
			.template-info-panel {
				border-left: none;
				left: -680px;
				right: inherit;
				box-shadow: 2px 1px 2px rgba(0,0,0, 0.25);
				transition: all 500ms ease-in-out;
			}
		}
		.gallery-left {
			li {
				a {
					&:hover {
						&:after {
							right: inherit;
							left: 0;
						}
					}
				}
			}
		}
		.template-overlay {
			top: 11px;
			left: 6px;
		}
		.instructions {
			float: right;
		}
		.searchBar {
			float: left;
		}
	}
	.esri-browseitems.showing {
		.gallery {
			.template-info-panel {
				left: 0;
				right: inherit;
			}
		}
	}
}
.esri-browseitems.showing {
	.dgrid-grid.dgrid {
		.gallery-view {
			img {
				&:hover {
					border-color: #e0e0e0;
				}
			}
		}
	}
	.instructions {
		.messageRight {
			opacity: 0.3;
			transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
			pointer-events: none;
		}
	}
	.templates {
		.dgrid {
			opacity: 0.3;
			transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
			pointer-events: none;
		}
		.filter-title {
			opacity: 0.3;
			transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
			pointer-events: none;
		}
	}
	.esriHelpIcon {
		opacity: 0.3;
		transition: opacity 250ms ease-in-out, left 0ms linear 250ms;
		pointer-events: none;
		pointer-events: none;
		cursor: default;
	}
	.gallery {
		.gallery-right {
			cursor: pointer;
		}
		.template-info-panel {
			opacity: 1;
			right: 0px;
		}
	}
	.panel-actions {
		opacity: 1;
	}
}
/* Medium screens */
@media all and (max-width: 800px) {
	.esri-browseitems {
		.dgrid {
			.dgrid-content {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
			}
			.dgrid-row {
				flex: 0 1 50%;
			}
		}
	}
}
/* Small screens */
@media all and (max-width: 500px) {
	.esri-browseitems {
		.dgrid {
			.dgrid-content {
                display: flex;
                flex-flow: column wrap;
			}
			.dgrid-pagination {
				.dgrid-next {
					flex: 0 1 50%;
				}
			}
		}
		.dgrid-grid.dgrid {
			.dgrid-navigation {
				margin: 0;
                flex-flow: row wrap;
				display: inline-flex;
                align-items: flex-end;
			}
		}
		.dgrid-pagination-links {
			flex: 0 1 50%;
		}
	}
	.esriBrowseAnalysisLayers {
		.top-bar {
            display: flex;
            flex-flow: row wrap;
			flex-direction: column;
		}
		.dgrid {
			.dgrid-pagination {
				.dgrid-previous {
					flex: 0 1 50%;
				}
			}
		}
	}
}
}

@if $include_BrowseItems == true {
  @include browseItems();
}